<template>
  <view class="notice-detail-container">
    <!-- 顶部标题栏 -->
    <!-- <view class="nav-bar">
      <uni-icons
        type="arrowleft"
        size="24"
        color="#333"
        @click="goBack"
      ></uni-icons>
      <text class="nav-title">消息详情</text>
      <view class="nav-right"></view>
    </view> -->

    <!-- 消息内容区域 -->
    <scroll-view class="notice-content-scroll" scroll-y>
      <view class="notice-header">
        <view class="notice-type" :style="{ color: noticeColor }">
          <uni-icons
            :type="noticeIcon"
            size="20"
            :color="noticeColor"
          ></uni-icons>
          <text>{{ noticeTypeText }}</text>
        </view>
        <view class="notice-title">{{ noticeData.title }}</view>
        <view class="notice-time">{{ formatTime(noticeData.time) }}</view>
      </view>

      <view class="notice-body">
        <text class="notice-text">{{ noticeData.content }}</text>

        <!-- 订单相关通知的额外信息 -->
        <view
          class="order-info"
          v-if="noticeData.type === NOTICE_TYPE.ORDER && noticeData.orderInfo"
        >
          <view class="order-info-title">订单信息</view>
          <view class="order-info-item">
            <text>订单编号：</text>
            <text>{{ noticeData.orderInfo.orderNo }}</text>
          </view>
          <view class="order-info-item">
            <text>订单金额：</text>
            <text>¥{{ noticeData.orderInfo.amount }}</text>
          </view>
          <view class="order-info-item">
            <text>物流单号：</text>
            <text>{{ noticeData.orderInfo.trackingNo || "暂无" }}</text>
          </view>
          <button
            class="view-order-btn"
            @click="viewOrder(noticeData.orderInfo.id)"
          >
            查看订单详情
          </button>
        </view>

        <!-- 活动相关通知的额外信息 -->
        <view
          class="activity-info"
          v-if="
            noticeData.type === NOTICE_TYPE.ACTIVITY && noticeData.activityInfo
          "
        >
          <image
            class="activity-image"
            :src="noticeData.activityInfo.image"
            mode="widthFix"
          ></image>
          <view class="activity-time">
            <uni-icons type="calendar" size="18" color="#FF8C00"></uni-icons>
            <text>活动时间：{{ noticeData.activityInfo.time }}</text>
          </view>
          <button
            class="view-activity-btn"
            @click="viewActivity(noticeData.activityInfo.id)"
          >
            查看活动详情
          </button>
        </view>

        <!-- 优惠券相关通知的额外信息 -->
        <view
          class="coupon-info"
          v-if="noticeData.type === NOTICE_TYPE.COUPON && noticeData.couponInfo"
        >
          <view class="coupon-card">
            <view class="coupon-amount">
              <text>¥</text>
              <text>{{ noticeData.couponInfo.amount }}</text>
            </view>
            <view class="coupon-detail">
              <view class="coupon-name">{{ noticeData.couponInfo.name }}</view>
              <view class="coupon-condition"
                >满{{ noticeData.couponInfo.minAmount }}元可用</view
              >
              <view class="coupon-time"
                >有效期至{{ noticeData.couponInfo.expireTime }}</view
              >
            </view>
          </view>
          <button
            class="use-coupon-btn"
            @click="useCoupon(noticeData.couponInfo.id)"
          >
            立即使用
          </button>
        </view>
      </view>

      <!-- 相关操作按钮 -->
      <view class="action-buttons" v-if="noticeData.type === NOTICE_TYPE.ORDER">
        <button class="action-btn contact">联系客服</button>
        <button class="action-btn primary">查看物流</button>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { formatTime } from "@/utils/util.js";

// 通知类型
const NOTICE_TYPE = {
  SYSTEM: 1, // 系统通知
  ORDER: 2, // 订单通知
  ACTIVITY: 3, // 活动通知
  COUPON: 4, // 优惠券通知
};

// 通知数据
const noticeData = ref({
  id: "",
  type: NOTICE_TYPE.SYSTEM,
  title: "",
  content: "",
  time: new Date(),
  read: false,
  orderInfo: null,
  activityInfo: null,
  couponInfo: null,
});

// 计算属性
const noticeTypeText = computed(() => {
  const typeMap = {
    [NOTICE_TYPE.SYSTEM]: "系统通知",
    [NOTICE_TYPE.ORDER]: "订单通知",
    [NOTICE_TYPE.ACTIVITY]: "活动通知",
    [NOTICE_TYPE.COUPON]: "优惠券通知",
  };
  return typeMap[noticeData.value.type] || "系统通知";
});

const noticeIcon = computed(() => {
  const icons = {
    [NOTICE_TYPE.SYSTEM]: "info",
    [NOTICE_TYPE.ORDER]: "cart",
    [NOTICE_TYPE.ACTIVITY]: "sound",
    [NOTICE_TYPE.COUPON]: "gift",
  };
  return icons[noticeData.value.type] || "info";
});

const noticeColor = computed(() => {
  const colors = {
    [NOTICE_TYPE.SYSTEM]: "#FF8C00",
    [NOTICE_TYPE.ORDER]: "#4CAF50",
    [NOTICE_TYPE.ACTIVITY]: "#FF5722",
    [NOTICE_TYPE.COUPON]: "#9C27B0",
  };
  return colors[noticeData.value.type] || "#FF8C00";
});

// 页面加载
onLoad((options) => {
  if (options.id) {
    // 模拟根据ID获取通知详情
    fetchNoticeDetail(options.id);
  }
});

// 获取通知详情
const fetchNoticeDetail = (id) => {
  // 模拟数据 - 实际项目中应调用API
  const mockData = {
    notice_1_0: {
      id: "notice_1_0",
      type: NOTICE_TYPE.SYSTEM,
      title: "系统维护通知",
      content:
        "尊敬的会员，我们的系统将于2023年6月15日凌晨2:00-4:00进行维护升级，期间将无法访问。给您带来的不便，敬请谅解。",
      time: new Date("2023-06-10 14:30:00"),
      read: true,
    },
    notice_2_0: {
      id: "notice_2_0",
      type: NOTICE_TYPE.ORDER,
      title: "订单发货通知",
      content:
        "您的订单202306011234已发货，快递公司：中通快递，预计1-3天送达。",
      time: new Date("2023-06-11 09:15:00"),
      read: false,
      orderInfo: {
        id: "202306011234",
        orderNo: "202306011234",
        amount: 199.0,
        trackingNo: "ZT123456789",
      },
    },
    notice_3_0: {
      id: "notice_3_0",
      type: NOTICE_TYPE.ACTIVITY,
      title: "限时优惠活动",
      content: "夏季大促，全场5折起，活动时间6.1-6.3，快来选购吧！",
      time: new Date("2023-06-01 10:00:00"),
      read: true,
      activityInfo: {
        id: "summer2023",
        image: "/static/images/activity-summer.jpg",
        time: "2023-06-01 至 2023-06-03",
      },
    },
    notice_4_0: {
      id: "notice_4_0",
      type: NOTICE_TYPE.COUPON,
      title: "优惠券到账提醒",
      content: "您已获得¥20无门槛优惠券，有效期至2023-06-30，赶快使用吧！",
      time: new Date("2023-06-05 16:20:00"),
      read: false,
      couponInfo: {
        id: "coupon123",
        name: "无门槛优惠券",
        amount: 20,
        minAmount: 0,
        expireTime: "2023-06-30",
      },
    },
  };

  // 模拟API请求延迟
  setTimeout(() => {
    noticeData.value = mockData[id] || mockData["notice_1_0"];
    // 标记为已读
    if (!noticeData.value.read) {
      markAsRead(id);
    }
  }, 500);
};

// 标记为已读
const markAsRead = (id) => {
  // 实际项目中应调用API标记通知为已读
  console.log(`标记通知 ${id} 为已读`);
  noticeData.value.read = true;
};

// 查看订单详情
const viewOrder = (orderId) => {
  uni.navigateTo({
    url: `/pages/order/detail?id=${orderId}`,
  });
};

// 查看活动详情
const viewActivity = (activityId) => {
  uni.navigateTo({
    url: `/pages/activity/detail?id=${activityId}`,
  });
};

// 使用优惠券
const useCoupon = (couponId) => {
  uni.switchTab({
    url: "/pages/index/index",
  });
  // 实际项目中可能需要传递优惠券ID到首页
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.notice-detail-container {
  height:   calc(100vh - 100rpx);
  display: flex;
  flex-direction: column;
  background-color: $white-bg;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;

  .nav-title {
    font-size: $font-size-32rpx;
    font-weight: bold;
    color: $text-color;
  }

  .nav-right {
    width: 24px;
  }
}

.notice-content-scroll {
  flex: 1;
  height: calc(100vh - 100rpx);
  width: 95%;
  margin: 0 auto;
}

.notice-header {
  padding: 40rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  .notice-type {
    display: flex;
    align-items: center;
    font-size: $font-size-26rpx;
    margin-bottom: 20rpx;

    text {
      margin-left: 10rpx;
    }
  }

  .notice-title {
    font-size: $font-size-32rpx;
    font-weight: bold;
    color: $text-color;
    margin-bottom: 15rpx;
  }

  .notice-time {
    font-size: $font-size-24rpx;
    color: $text-color-666;
  }
}

.notice-body {
  padding: 40rpx 0;

  .notice-text {
    font-size: $font-size-28rpx;
    color: $text-color;
    line-height: 1.6;
  }

  .order-info,
  .activity-info,
  .coupon-info {
    margin-top: 40rpx;
    padding: 30rpx;
    background-color: $light-bg;
    border-radius: 10rpx;
  }

  .order-info-title {
    font-size: $font-size-28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: $text-color;
  }

  .order-info-item {
    display: flex;
    font-size: $font-size-26rpx;
    margin-bottom: 15rpx;
    color: $text-color;

    text:first-child {
      color: $text-color-666;
      width: 150rpx;
    }
  }

  .view-order-btn {
    margin-top: 30rpx;
    background-color: $primary-color;
    color: $text-color-inverse;
    font-size: $font-size-28rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
  }

  .activity-image {
    width: 100%;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
  }

  .activity-time {
    display: flex;
    align-items: center;
    font-size: $font-size-26rpx;
    color: $text-color;
    margin-bottom: 30rpx;

    text {
      margin-left: 10rpx;
    }
  }

  .view-activity-btn {
    background-color: $primary-color;
    color: $text-color-inverse;
    font-size: $font-size-28rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
  }

  .coupon-card {
    display: flex;
    padding: 30rpx;
    background: linear-gradient(to right, $primary-color, $secondary-color);
    border-radius: 10rpx;
    color: $text-color-inverse;
    margin-bottom: 30rpx;

    .coupon-amount {
      font-size: $font-size-40rpx;
      font-weight: bold;
      margin-right: 30rpx;

      text:first-child {
        font-size: $font-size-28rpx;
      }
    }

    .coupon-detail {
      flex: 1;

      .coupon-name {
        font-size: $font-size-30rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }

      .coupon-condition,
      .coupon-time {
        font-size: $font-size-24rpx;
        opacity: 0.9;
      }
    }
  }

  .use-coupon-btn {
    background-color: $primary-color;
    color: $text-color-inverse;
    font-size: $font-size-28rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
  }
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  padding: 40rpx 0;
  border-top: 1rpx solid #f5f5f5;

  .action-btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    font-size: $font-size-28rpx;
    border-radius: 40rpx;
    margin: 0 15rpx;

    &.contact {
      background-color: $white-bg;
      color: $text-color;
      border: 1rpx solid #ddd;
    }

    &.primary {
      background-color: $primary-color;
      color: $text-color-inverse;
    }
  }
}
</style>
